<template>
  <view class="container">
    <app-header title="心岛低语"></app-header>
    
    <scroll-view scroll-y class="main-content">
      <feature-banner 
        title="全新体验" 
        description="专属情绪倾诉模式已上线" 
        buttonText="立即体验">
      </feature-banner>
      
      <view class="section-title">
        <text class="main-title">聆听内心潮汐 <text class="sparkle">✨</text></text>
        <view class="subtitle-wrapper">
          <text class="subtitle">解锁专属情绪密码</text>
        </view>
      </view>
      
      <score-card 
        score="95" 
        maxScore="100" 
        label="心灵治愈值" 
        status="心灵平静状态" 
        buttonText="今日情绪解析">
        <progress-bar 
          label="情绪舒缓指数" 
          value="10" 
          icon="❤️" 
          type="emotion">
        </progress-bar>
        <progress-bar 
          label="压力释放指数" 
          value="93" 
          icon="⭐" 
          type="pressure">
        </progress-bar>
        <progress-bar 
          label="心灵能量指数" 
          value="89" 
          icon="⚡" 
          type="energy">
        </progress-bar>
        <progress-bar 
          label="自我认知指数" 
          value="100" 
          icon="🧠" 
          type="cognition">
        </progress-bar>
      </score-card>
      
      <section-header title="精选体验" type="purple"></section-header>

            <view class="feature-grid">
              <!-- 第一个卡片占满宽度 -->
              <feature-card 
                title="情绪密语解析" 
                description="探索你的情绪疑问，解读潜意识信号" 
                type="emotion" 
                icon="💖" 
                buttonText="开始倾诉" 
                :recommended="true" 
                :fullWidth="true">
              </feature-card>
            </view>
            
            <!-- 第二行两个卡片并排 -->
            <view class="feature-grid">
              <feature-card 
                title="压力释放指南" 
                description="释放紧绷情绪 重启内心活力" 
                type="pressure" 
                icon="🧸">
              </feature-card>
              
              <feature-card 
                title="心灵成长档案" 
                description="记录情绪轨迹 探索心灵成长密码" 
                type="growth" 
                icon="🌱">
              </feature-card>
            </view>
            
            <!-- <section-header title="探索更多" type="pink" showHint></section-header> -->
            
            <!-- 底部空间 -->
            <view style="height: 30rpx;"></view>
    </scroll-view>
  </view>
</template>

<script>
import AppHeader from '@/components/app-header/app-header.vue';
import FeatureBanner from '@/components/feature-banner/feature-banner.vue';
import ScoreCard from '@/components/score-card/score-card.vue';
import ProgressBar from '@/components/progress-bar/progress-bar.vue';
import SectionHeader from '@/components/section-header/section-header.vue';
import FeatureCard from '@/components/feature-card/feature-card.vue';

export default {
  components: {
    AppHeader,
    FeatureBanner,
    ScoreCard,
    ProgressBar,
    SectionHeader,
    FeatureCard
  },
  data() {
    return {};
  },
  onLoad() {
    // 页面加载时执行
  },
  methods: {}
};
</script>

<style>
@import '@/static/styles/common.css';

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #000;
  width: 100%;
  box-sizing: border-box; /* 确保padding不会增加宽度 */
}

.main-content {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
}

.section-title {
  margin-bottom: 30rpx;
}


.main-title {
  font-size: 48rpx;
  font-weight: bold;
  background: linear-gradient(to right, #c084fc, #93c5fd);
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 10rpx;
}

.sparkle {
  color: #93c5fd;
}

.subtitle-wrapper {
  display: flex;
  justify-content: center;
}

.subtitle {
  font-size: 26rpx;
  color: #9ca3af;
  border-bottom: 1px solid #4b5563;
  padding: 0 40rpx 10rpx 40rpx;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  margin-bottom: 30rpx;
  width: 100%;
  box-sizing: border-box;
}
</style>